<!DOCTYPE html>
<html>
<style>
	.m{
		display: none;
	}
	.m:target{
		display: block;
	}
</style>
<head>
	<title>【Draft】(〃••〃)</title>
</head>
<body>
	<div class="btn" goto="m1">点击前往板块一</div>
	<div class="btn" goto="m2">点击前往板块二</div>
	<div id="m1" class="m">
		我是板块一(〃••〃)
	</div>
	<div id="m2" class="m">
		我是板块二٩(ˊᗜˋ*)و
	</div>
	</body>
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
	document.getElementsByClassName('btn')[0].onclick = goto;
	document.getElementsByClassName('btn')[1].onclick = goto;
	function initial(){
		var qs = location.href.slice(-2);
		if(qs === 'm1') document.getElementById('m1').style.display = 'block';
		else if(qs === 'm2') document.getElementById('m2').style.display = 'block';
	}
	function goto(e){
		var hash = e.target.getAttribute('goto');
		// location.hash = hash;
		// location.href = './index.html?hash='+hash;
		history.pushState({name:'stateObj'},'index','index.html?hash='+hash)
		// 并不会触发hashchange
		// history.pushState({name:'stateObj'},'index','index.html?#'+hash)
	}
	window.onhashchange = function(){
		console.log('hashchange!')
	}
	window.onpopstate = function(e){
		console.log(e)
		initial()
	}
	// function library(module){
	// 	$(function(){
	// 		if(module.init){
	// 			module.init();
	// 		}
	// 		return module;
	// 	})
	// }
	// var myLibrary = library(function(){
	// 	return {
	// 		init:function(){
	// 			console.log('我被inited了喔')
	// 		}
	// 	}
	// })
</script>
</html>